<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="dv">
        <p>层中的第一个p标签</p>哈哈哈
        <span>层中的第二个标签==span</span>
        <ul id="uu">嘎嘎
            <li>火箭</li>
            <li>热火</li>
            <li id="three">湖人</li>
            <li>小牛</li>
            <li>公牛</li>嘿嘿
        </ul>
    </div>
    <script>
        function my$(id) {
        　　return document.getElementById(id);
        }
    </script>
    <script>
        function addClass(element,value) {
            if (!element.className) {
                element.className = value;
            } else {
                newClassName = element.className;
                newClassName += " "; //这句代码追加的类名分开
                newClassName += value;
                element.className = newClassName;
            }
        }
                //获取当前元素中的第一个子节点
        console.log(my$("uu").firstChild);
        //获取当前元素中的第一个子元素
        console.log(my$("uu").firstElementChild);
        //获取当前元素中的最后一个子节点
        console.log(my$("uu").lastChild);
        //获取当前元素中的最后一个子元素
        console.log(my$("uu").lastElementChild);
        //获取当前元素的父级节点
        console.log(my$("uu").parentNode);
        //获取当前元素的父级子元素
        console.log(my$("uu").parentElement);
        //获取当前元素的子节点
        console.log(my$("uu").childNodes);
        //获取当前元素的子元素
        console.log(my$("uu").children);
        //获取当前元素的前一个兄弟节点
        console.log(my$("three").previousSibling);
        //获取当前元素的前一个兄弟元素
        console.log(my$("three").previousElementSibling);
        //获取当前元素的后一个兄弟节点
        console.log(my$("three").nextSibling);
        //获取当前元素的后一个兄弟元素
        console.log(my$("three").nextElementSibling);
    </script>
    </body>
</html>